<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <div class="logo">
        <span class="spanimg" @click="Jump_path"></span>
      </div>
      <div class="text">书架</div>
    </div>
    <!-- 内容区 -->
    <div class="content">
      <van-tabs v-model="active">
        <van-tab title="最近收藏">
          <div
            class="comic-info-content"
            v-for="item in Collectionlists"
            :key="item.comic_id"
            @click="Jump_pre(item.comic_id, item.comic_name)"
          >
            <div class="comic-img">
              <img :src="item.imgurl" alt="" />
            </div>
            <div class="comic-cover2"></div>
            <div class="mask-triangle"></div>
            <div class="img-box">
              <img :src="item.imgurl" />
            </div>
            <div class="comic-info-box">
              <strong class="comic-title">{{ item.comic_name }}</strong>
              <div class="comic-renqi">
                人气：<span>{{ item.heat | playCountNum }}</span>
              </div>
              <div class="author-name">{{ item.comic_desc }}</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="历史阅览">
          <div
            class="comic-info-content"
            v-for="item in historylists"
            :key="item.comic_id"
            @click="Jump_pre(item.comic_id, item.comic_name)"
          >
            <div class="comic-img">
              <img :src="item.imgurl" alt="" />
            </div>
            <div class="comic-cover2"></div>
            <div class="mask-triangle"></div>
            <div class="img-box">
              <img :src="item.imgurl" />
            </div>
            <div class="comic-info-box">
              <strong class="comic-title">{{ item.comic_name }}</strong>
              <div class="comic-renqi">
                人气：<span>{{ item.heat | playCountNum }}</span>
              </div>
              <div class="author-name">{{ item.comic_desc }}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 2,
      historylist: "",
      historylists: [],
      Collectionlists: [],
    };
  },
  created() {
    this.gethistorylists();
    this.getCollectionlists();
  },
  methods: {
    //返回上一级
    Jump_path() {
      this.$router.go(-1);
    },
    //跳转详情页
    Jump_pre(id, name) {
      this.$emit("getid", id);
      this.$router.push({ name: "pre" });
      this.$emit("getcomicname", name);
    },
    //请求历史阅历
    gethistorylists() {
      this.historylist = window.localStorage.getItem("historylist");
      this.historylist = JSON.parse(this.historylist);
      console.log(this.historylist);
      this.historylist.forEach((item) => {
        console.log(item.historyid);
        this.$axios({
          url: "https://www.kanman.com/api/getComicInfoAttribute",
          method: "get",
          params: {
            comic_id: item.historyid,
          },
        }).then((data) => {
          data.data.data["imgurl"] = `https://image.yqmh.com/mh/${item.historyid}.jpg`;
          this.historylists.push(data.data.data);

         
        });
      }, 500);
      console.log(this.historylists);
    },
    //请求收藏
    getCollectionlists() {
      this.Collectionlist = window.localStorage.getItem("Collectionlist");
      this.Collectionlist = JSON.parse(this.Collectionlist);
      console.log(this.Collectionlist);
      this.Collectionlist.forEach((item) => {
        console.log(item.Collectionid);
        this.$axios({
          url: "https://www.kanman.com/api/getComicInfoAttribute",
          method: "get",
          params: {
            comic_id: item.Collectionid,
          },
        }).then((data) => {
            data.data.data["imgurl"] = `https://image.yqmh.com/mh/${item.Collectionid}.jpg`;
          this.Collectionlists.push(data.data.data);

          });
        });
 
    },
  },

  filters: {
    playCountNum(value) {

      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算

      return y;
    },
  },
};
</script>
<style scoped>
/* 头部 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  background-color: #fff;
  padding: 13px 13px 0 13px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #b3b3b3;
  z-index: 999;
}
.logo {
  width: 40px;
  height: 26.5px;
  line-height: 26.5px;
}
.spanimg {
  display: inline-block;
  width: 18px;
  height: 30px;
 background: url(../../public/assets/images-index/zjt.png) no-repeat;
  background-size: 70% 70%;
}
.longspan {
  font-size: 18px;
  display: inline-block;
  color: #333;
  margin-left: 12px;
  font-weight: 800;
  position: relative;
  top: -13px;
}
.text {
  line-height: 23px;
  font-weight: bold;
  font-size: 18px;
}
.content {
  margin-top: 53px;
}

.comic-info-content {
  /* margin-top: 53px; */
  position: relative;
  width: 100%;
  height: 175px;
  border-bottom: 1px solid #f2f2f2;
  color: #fff;
  overflow: hidden;
}

.comic-info-content #comic-cover {
  position: absolute;
  width: 100%;
  height: 166px;
  left: 0;
  top: 0;
  z-index: 55;
}
.comic-img {
  position: relative;
  width: 100%;
  height: 166px;
}
.comic-img img {
  filter: blur(10px);
  width: 100%;
  height: 100%;
}
.comic-info-content .comic-cover2 {
  position: absolute;
  width: 100%;
  height: 166px;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.comic-info-content .comic-cover2 {
  position: absolute;
  width: 100%;
  height: 166px;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.comic-info-content .mask-triangle {
  position: absolute;
  bottom: 9px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 0px solid transparent; /*左顶点到上顶点的水平距离*/
  border-right: 375px solid transparent; /*右顶点到上顶点的水平距离*/
  border-bottom: 70px solid #fff; /*底线到上顶点的水平距离*/
}
.comic-info-content .img-box {
  position: absolute;
  width: 119px;
  height: 149.5px;
  top: 14.5px;
  left: 9px;
  border: 1px solid #fff;
  border-radius: 6px;
  overflow: hidden;
}
.comic-info-content .img-box img {
  width: 100%;
  height: 100%;
}
.comic-info-content .comic-info-box {
  position: absolute;
  z-index: 2;
  color: #fff;
  top: 18px;
  left: 142px;
}
.comic-info-content .comic-title {
  display: block;
  height: 26px;
  line-height: 26px;
}
.comic-info-content .comic-info-box .comic-renqi,
.author-name {
  width: 70%;
  font-size: 12px;
  line-height: 17px;
  margin-top: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.comic-info-content .comic-info-box .comic-renqi {
  width: 150px;
}
.comic-info-content .comic-info-box .comic-renqi span {
  width: 100%;
  font-size: 12px;
  line-height: 17px;
  color: #ff655d;
}
</style>